<template>
  <div class="todo_main">
   
    <!-- 主体区域-->
    <section class="main">
      <input
        id="toggle-all"
        class="toggle-all"
        type="checkbox"
        v-model="isAll"
      />
      <label for="toggle-all">Mark all as complete</label>
      <ul class="todo-list">
        <li :class="{completed : item.done}" v-for="(item,index) in todoList" :key="index">
          <div class="view">
            <input
              class="toggle"
              type="checkbox"
              :checked="item.done"
              v-model="item.done"
            />
            <label>{{item.name}}</label>
            <button class="destroy" @click="$emit('delTodo',index)"></button>
          </div>
          <input
            class="edit"
            value="Create a TodoMVC template"
          />
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
export default {
  // 父传子
  props : {
    todoList : {
      type : Array,
      required : true
    }
  },
  computed : {
    // 全选和小选
    isAll : {
      get() {
        return this.todoList.every(({done}) => done)
      },
      set(flag) {
        this.$emit('isAll',flag)
      }
    }
  }
}
</script>

<style>

</style>